<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="usrFormQueryRef" :model="usrFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16" v-show="!usrFormQueryVisible">
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <a-input-search v-model:value="usrFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="usrFormQuerySubmitting" @search="usrFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <Dict v-model="usrFormQueryModel.usrType" dictKey="usrTypeSearch" formItemName="usrType" @change="usrUsrTypeDictSelectChange" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="usrFormQueryUpDown">
              展开
              <CoreIcon icon="akar-icons:chevron-down" :size="14" />
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="usrFormQueryVisible">
          <a-col :span="8">
            <a-form-item>
              <a-input-search v-model:value="usrFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="usrFormQuerySubmitting" @search="usrFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <Dict v-model="usrFormQueryModel.usrType" dictKey="usrTypeSearch" formItemName="usrType" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="用户类型">
              <a-input v-model:value="usrFormQueryModel.usrTypeAndLike" placeholder="输入用户类型" />
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="用户名">
              <a-input v-model:value="usrFormQueryModel.usrnameAndLike" placeholder="输入用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="手机号">
              <a-input v-model:value="usrFormQueryModel.mphoneNoAndLike" placeholder="输入手机号" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="邮箱">
              <a-input v-model:value="usrFormQueryModel.emailAndLike" placeholder="输入邮箱" />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="头像">
              <a-input v-model:value="usrFormQueryModel.avatarUrlAndLike" placeholder="输入头像" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="排序权重">
              <a-input-number v-model:value="usrFormQueryModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col> -->
          <a-col :span="24">
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="usrFormQueryReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="usrFormQuerySubmitting" @click="usrFormQuerySearch">
                <CoreIcon icon="ant-design:search-outlined" :size="14" />
                查询
              </a-button>
              <a-button type="link" @click="usrFormQueryUpDown">
                收起
                <CoreIcon icon="akar-icons:chevron-up" :size="14" />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="primary" ghost @click="usrAdd">
          <CoreIcon icon="carbon:add-alt" :size="14" />
          新增
        </a-button>
        <a-button type="dashed" @click="usrUpdate" v-if="usrListSelectLength === 1">
          <CoreIcon icon="ri:brush-line" :size="14" />
          修改
        </a-button>
        <a-popconfirm title="确认删除？" placement="bottom" @confirm="usrDelete" v-if="usrListSelectLength > 0">
          <a-button type="dashed" danger>
            <CoreIcon icon="jam:delete" :size="14" />
            删除
          </a-button>
        </a-popconfirm>
        <a-button @click="usrDetailInfo" v-if="usrListSelectLength === 1">
          <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
          详情
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="link" shape="circle" @click="usrListGetDataSet">
          <CoreIcon icon="ci:refresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="usrListColumns"
        :data-source="usrListDataSet"
        :loading="usrListLoading"
        :pagination="false"
        bordered
        :customRow="usrListCustomRow"
        :row-selection="{ fixed: true, selectedRowKeys: usrListSelectedRowKeys, onChange: usrListRowOnChange }"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
        <template #usrTypeData="{ text }">
          <span>{{ coreToolStore.getDictDisplayName('usrType', text) }}</span>
        </template>
      </a-table>
      <a-pagination
        v-model:current="usrListDataPage"
        v-model:pageSize="usrListDataRows"
        :total="usrListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="usrListPaginationChange"
        @showSizeChange="usrListPaginationShowSizeChange"
        v-if="usrListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!usrListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(usrListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="usrEditDrawerVisible"
      title="编辑用户信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="usrEditDrawerOnClose"
    >
      <a-form ref="usrFormRef" :model="usrFormModel" :rules="usrFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="用户名" name="usrname">
              <a-input v-model:value="usrFormModel.usrname" placeholder="输入用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号 (不能重复)" name="mphoneNo">
              <a-input v-model:value="usrFormModel.mphoneNo" placeholder="输入手机号" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <!-- <a-form-item label="用户类型" name="usrType">
              <a-input v-model:value="usrFormModel.usrType" placeholder="输入用户类型" />
            </a-form-item> -->
            <Dict v-model="usrFormModel.usrType" dictKey="usrType" formItemName="usrType" />
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮箱" name="email">
              <a-input v-model:value="usrFormModel.email" placeholder="输入邮箱" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="usrFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <FileUpload ref="usrFormFileUploadRef" fileModule="usrAvatar" @change="usrFormFileUploadChange" />
          <a-col :span="24">
            <a-form-item label="头像url" name="avatarUrl">
              <!-- <a-input v-model:value="usrFormModel.avatarUrl" disabled placeholder="输入头像url" /> -->
              <a-input v-model:value="usrFormModel.avatarUrl" disabled placeholder="输入头像url">
                <template #addonAfter>
                  <a-button type="link" size="small" @click="usrFormAvatarUrlSelectFileClick">选择文件</a-button>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="角色列表" name="roleList">
              <a-select v-model:value="usrFormModel.roleList" mode="multiple" optionFilterProp="title" show-search allowClear placeholder="请选择" :style="{ ...coreStyle.width('100%') }">
                <a-select-option v-for="item in usrRoleListSelectData" :value="item.id" :key="item.id" :title="item.roleName + ' - [' + coreToolStore.getDictDisplayName('roleType', item.roleType) + ']'">
                  {{ item.roleName + ' - [' + coreToolStore.getDictDisplayName('roleType', item.roleType) + ']' }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="usrFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="usrFormSaveSubmitting" @click="usrFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="usrFormSaveSubmitting" @click="usrFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="usrDetailDrawerVisible"
      title="用户详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="用户名" :span="1">{{ usrDetailModel.usrname }}</a-descriptions-item>
          <a-descriptions-item label="手机号" :span="1">{{ usrDetailModel.mphoneNo }}</a-descriptions-item>
          <a-descriptions-item label="用户类型" :span="1">{{ coreToolStore.getDictDisplayName('roleType', usrDetailModel.usrType) }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="1">{{ usrDetailModel.weightOrder }}</a-descriptions-item>
          <a-descriptions-item label="邮箱" :span="2">{{ usrDetailModel.email }}</a-descriptions-item>
          <a-descriptions-item label="头像" :span="2">{{ usrDetailModel.avatarUrl }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="usrDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="usrEditFileSelectDrawerVisible"
      title="文件选择"
      placement="right"
      :closable="false"
      destroyOnClose
      :width="'80%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 0, 0) }"
    >
      <FileSelect fileModule="usrAvatar" @change="usrFormFileSelectChange" />
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useUsrStore } from '/@/store/modules/cn/core/sign/usrStore'

import type { Usr } from '/@/model/cn/core/sign/eo/Usr'
import { toUsr } from '/@/model/cn/core/sign/eo/Usr'

import type { UsrQO } from '/@/model/cn/core/sign/qo/UsrQO'
import { toUsrQO } from '/@/model/cn/core/sign/qo/UsrQO'

import type { UsrVO } from '/@/model/cn/core/sign/vo/UsrVO'
import { toUsrVO } from '/@/model/cn/core/sign/vo/UsrVO'

import { useRoleStore } from '/@/store/modules/cn/core/sign/roleStore'

import type { Role } from '/@/model/cn/core/sign/eo/Role'
import type { RoleQO } from '/@/model/cn/core/sign/qo/RoleQO'

@Options({
  name: 'CoreUsr',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useUsrStore, useRoleStore),
  },
})
export default class CoreUsr extends Vue {

  usrListDataSet: Array<UsrVO> = []

  usrListColumns: Array<object> = [
    {
      title: '用户名',
      dataIndex: 'usrname',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '手机号',
      dataIndex: 'mphoneNo',
      align: 'center',
      // ellipsis: true,
      width: 150,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      align: 'center',
      // ellipsis: true,
      width: 200,
    },
    {
      title: '用户类型',
      dataIndex: 'usrType',
      align: 'center',
      slots: { customRender: 'usrTypeData' },
      // ellipsis: true,
      width: 150,
    },
    // {
    //   title: '头像',
    //   dataIndex: 'avatarUrl',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      width: 100,
    },
  ]

  usrListLoading: boolean = false

  usrListSelectedRowKeys: string[] = []

  usrListSelectData: Array<UsrVO> = []

  usrListSelectLength: number = 0

  usrListSelectCurrentRowIndex: number = -1

  usrListSelectCurrentRowData: UsrVO = toUsrVO()

  usrListPaginationVisible: boolean = true

  usrListDataPage: number = 1

  usrListDataRows: number = 10

  usrListDataCount: number = 0

  usrListRowOnChange(selectedRowKeys, selectedRows) {
    this.usrListSelectedRowKeys = [ ...selectedRowKeys ]
    this.usrListSelectData = [ ...selectedRows ]
    this.usrListSelectLength = selectedRows.length
  }

  usrListCustomRow(record, index) {
    return {
      'class': index === this.usrListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.usrListSelectCurrentRowIndex = index
        this.usrListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.usrListSelectedRowKeys ]
        let selectedRows = [ ...this.usrListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.usrListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.usrListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.usrStore.pkVo(this.$toParam<UsrQO>({ id: this.usrListSelectCurrentRowData.id } as UsrQO)).then((res: Res<UsrVO>) => {
          if (res.succ) {
            this.usrDetailModel = { ...res.data[0] }
            this.usrDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  usrListGetDataSet() {
    this.usrListLoading = true
    this.usrListRowOnChange([], [])
    this.usrListSelectCurrentRowIndex = -1
    this.usrListSelectCurrentRowData = toUsrVO()
    this.usrStore.pagingVo(this.$toParam<UsrQO>({ weightOrderAsc: 'y' } as UsrQO, this.usrListDataPage, this.usrListDataRows)).then((res: Res<UsrVO>) => {
      if (res.succ) {
        this.usrListPaginationVisible = true
        this.usrListDataSet = [ ...res.data ]
        this.usrListDataCount = res.count
        setTimeout(() => { this.usrListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.usrListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.usrListLoading = false }, 500)
    })
  }

  usrListPaginationChange() {
    this.usrListGetDataSet()
  }

  usrListPaginationShowSizeChange() {
    this.usrListGetDataSet()
  }

  usrFormQueryVisible: boolean = false

  usrFormQuerySubmitting: boolean = false

  usrFormQueryModel: UsrQO = toUsrQO()

  usrFormQueryUpDown() {
    this.usrFormQueryVisible = !this.usrFormQueryVisible
  }

  usrFormQueryReset() {
    if (this.$refs.usrFormQueryRef) {
      this.$refs.usrFormQueryRef.resetFields()
      this.usrFormQueryModel = toUsrQO()
    }
  }

  usrFormQuerySearch() {
    this.usrFormQuerySubmitting = true
    this.usrListLoading = true
    this.usrListRowOnChange([], [])
    this.usrListSelectCurrentRowIndex = -1
    this.usrListSelectCurrentRowData = toUsrVO()
    this.usrStore.queryVo(this.$toParam<UsrQO>(this.$toSearch({ ...this.usrFormQueryModel }))).then((res: Res<UsrVO>) => {
      if (res.succ) {
        this.usrListPaginationVisible = false
        this.usrListDataSet = [ ...res.data ]
        this.usrListDataCount = res.count
        setTimeout(() => { this.usrFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.usrListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.usrFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.usrListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.usrFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.usrListLoading = false }, 500)
    })
  }

  usrUsrTypeDictSelectChange(value) {
    this.usrFormQuerySearch()
  }

  usrEditDrawerVisible: boolean = false

  usrFormSaveSubmitting: boolean = false

  usrFormSaveContinue: boolean = false

  usrFormModel: UsrVO = toUsrVO()

  usrFormRules: object = {
    usrType: [
      { type: 'string', required: true, message: '用户类型不能为空！', trigger: ['change', 'blur'] },
    ],
    usrname: [
      { type: 'string', required: true, message: '用户名不能为空！', trigger: ['change', 'blur'] },
    ],
    // mphoneNo: [
    //   { type: 'string', required: true, message: '手机号不能为空！', trigger: ['change', 'blur'] },
    // ],
    // email: [
    //   { type: 'string', required: true, message: '邮箱不能为空！', trigger: ['change', 'blur'] },
    // ],
    // avatarUrl: [
    //   { type: 'string', required: true, message: '头像不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
    // roleList: [
    //   { type: 'array', required: true, message: '用户名不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  usrRoleListSelectData: Array<Role> = []

  usrEditFileSelectDrawerVisible: boolean = false

  usrFormFileUploadChange(value) {
    this.usrFormModel.avatarUrl = value
  }

  usrFormAvatarUrlSelectFileClick() {
    this.usrEditFileSelectDrawerVisible = true
  }

  usrFormFileSelectChange(fileUrlList) {
    this.usrFormModel.avatarUrl = fileUrlList[0]
    this.usrEditFileSelectDrawerVisible = false
  }

  usrFormReset() {
    if (this.$refs.usrFormRef) {
      this.$refs.usrFormRef.resetFields()
      this.usrFormModel = toUsrVO()
      this.$refs.usrFormFileUploadRef.resetFiles()
    }
  }

  usrFormSubmit() {
    this.usrFormSaveSubmitting = true
    this.$refs.usrFormRef.validate().then(() => {
      if (this.usrFormModel.id) {
        this.usrStore.update(this.$toParam<UsrVO>(this.usrFormModel)).then((res: Res<UsrVO>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.usrFormReset()
            this.usrFormSaveSubmitting = false
            if (!this.usrFormSaveContinue) {
              this.usrEditDrawerVisible = false
              this.usrListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.usrFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.usrFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.usrStore.save(this.$toParam<UsrVO>(this.usrFormModel)).then((res: Res<UsrVO>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.usrFormReset()
            this.usrFormSaveSubmitting = false
            if (!this.usrFormSaveContinue) {
              this.usrEditDrawerVisible = false
              this.usrListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.usrFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.usrFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.usrFormSaveSubmitting = false }, 3000)
    })
  }

  usrFormSave() {
    this.usrFormSaveContinue = false
    this.usrFormSubmit()
  }

  usrFormNextAdd() {
    this.usrFormSaveContinue = true
    this.usrFormSubmit()
  }

  usrAdd() {
    if (this.usrFormModel.id) {
      this.usrFormReset()
    }
    this.roleStore.query(this.$toParam<RoleQO>({ weightOrderAsc: 'y' } as RoleQO)).then((res: Res<Role>) => {
      if (res.succ) {
        this.usrRoleListSelectData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.usrEditDrawerVisible = true
  }

  usrUpdate() {
    this.roleStore.query(this.$toParam<RoleQO>({ weightOrderAsc: 'y' } as RoleQO)).then((res: Res<Role>) => {
      if (res.succ) {
        this.usrRoleListSelectData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.usrStore.pkVo(this.$toParam<UsrQO>({ id: this.usrListSelectData[0].id } as UsrQO)).then((res: Res<UsrVO>) => {
      if (res.succ) {
        this.usrFormReset()
        this.usrFormModel = { ...res.data[0] }
        this.usrEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  usrEditDrawerOnClose() {
    if (this.usrFormSaveContinue) {
      this.usrFormSaveContinue = false
      this.usrListGetDataSet()
    }
  }

  usrDelete() {
    let param: Array<Usr> = []
    this.usrListSelectData.forEach((eo: UsrVO) => {
      param.push({ id: eo.id } as Usr)
    })
    this.usrStore.removeBatch(this.$toParam<Usr>(param)).then((res: Res<Usr>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.usrListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  usrDetailDrawerVisible: boolean = false

  usrDetailModel: UsrVO = toUsrVO()

  usrDetailInfo() {
    this.usrStore.pkVo(this.$toParam<UsrQO>({ id: this.usrListSelectData[0].id } as UsrQO)).then((res: Res<UsrVO>) => {
      if (res.succ) {
        this.usrDetailModel = { ...res.data[0] }
        this.usrDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  usrDetailUpdate() {
    this.roleStore.query(this.$toParam<RoleQO>({ weightOrderAsc: 'y' } as RoleQO)).then((res: Res<Role>) => {
      if (res.succ) {
        this.usrRoleListSelectData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.usrStore.pkVo(this.$toParam<UsrQO>({ id: this.usrDetailModel.id } as UsrQO)).then((res: Res<UsrVO>) => {
      if (res.succ) {
        this.usrFormReset()
        this.usrFormModel = { ...res.data[0] }
        this.usrDetailDrawerVisible = false
        this.usrEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.usrListGetDataSet()
  }

}
</script>

<style scoped lang="less">

</style>
